<template>
	<wd-config-provider :theme-vars="themeVars">
		<view class="container">
			<wd-row>
				<wd-col :span="24">
					<wd-button type="primary" @click="handleLogin">登录</wd-button>
				</wd-col>
			</wd-row>
		</view>
		<!-- 登录弹窗 -->
		<wx-login-popup v-model:visible="showLoginPopup" @success="handleLoginSuccess" @fail="handleLoginFail" />
	</wd-config-provider>
</template>

<script lang="ts">
import { ref } from 'vue';
import { useCool, useStore } from "/@/cool";
import { useI18n } from "vue-i18n";

export default {
	name: 'HomePage',
	setup() {
		const { router } = useCool();
		const { user } = useStore();
		const { t } = useI18n();

		const showLoginPopup = ref(false);

		const handleLogin = () => {
			showLoginPopup.value = true;
		};

		const handleLoginSuccess = (res: any) => {
			console.log('登录成功', res);
		};

		const handleLoginFail = (err: any) => {
			console.error('登录失败', err);
		};

		return {
			showLoginPopup,
			handleLogin,
			handleLoginSuccess,
			handleLoginFail,
			themeVars: {}
		};
	}
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	padding: 90rpx 24rpx 150rpx;
	background-color: #f5f5f5;
	box-sizing: border-box;
}
</style>
